<nz-card class="list_card" [nzTitle]="cardTitle" [nzExtra]="extraTemplate">
  <form nz-form>
    <nz-tabset>
      <!-- 阿里云短信配置选项卡 -->
      <nz-tab [nzTitle]="aliSmsCodeTabTitleTpl">
        <ng-template #aliSmsCodeTabTitleTpl>
          <span>阿里云</span>
        </ng-template>

        <!-- 是否启用 -->
        <div nz-col nzSpan="24">
          <div nz-row>
            <div style="margin-bottom: 20px;" nz-col nzSpan="12">
              <label nz-checkbox name="aliSmsCodeIsEnabled" [(ngModel)]="aliSmsCode.isEnabled">是否启用(请确认配置正确后再启用！)</label>
            </div>
          </div>
        </div>

        <!-- accessKeyId -->
        <nz-form-item>
          <nz-form-label nzFor="accessKeyId">accessKeyId</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="accessKeyId" name="accessKeyId" [attr.disabled]="!aliSmsCode.isEnabled ? 'disabled' : null"
              [(ngModel)]="aliSmsCode.accessKeyId">
          </nz-form-control>
        </nz-form-item>

        <!-- accessKeySecret -->
        <nz-form-item>
          <nz-form-label nzFor="accessKeySecret">accessKeySecret</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="accessKeySecret" name="accessKeySecret" [attr.disabled]="!aliSmsCode.isEnabled ? 'disabled' : null"
              [(ngModel)]="aliSmsCode.accessKeySecret">
          </nz-form-control>
        </nz-form-item>

        <!-- 短信签名 -->
        <nz-form-item>
          <nz-form-label nzFor="signName">短信签名</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="短信签名" name="signName" [attr.disabled]="!aliSmsCode.isEnabled ? 'disabled' : null"
              [(ngModel)]="aliSmsCode.signName">
          </nz-form-control>
        </nz-form-item>

        <!-- 短信模板 -->
        <nz-form-item>
          <nz-form-label nzFor="templateCode">短信模板</nz-form-label>
          <nz-form-control>
            <textarea rows="4" nz-input placeholder="短信模板" name="templateCode" [attr.disabled]="!aliSmsCode.isEnabled ? 'disabled' : null"
              [(ngModel)]="aliSmsCode.templateCode"></textarea>
          </nz-form-control>
        </nz-form-item>

        <!-- JSON串 -->
        <nz-form-item>
          <nz-form-label nzFor="templateParam">JSON串</nz-form-label>
          <nz-form-control>
            <textarea rows="4" nz-input placeholder="JSON串" name="templateParam" [attr.disabled]="!aliSmsCode.isEnabled ? 'disabled' : null"
              [(ngModel)]="aliSmsCode.templateParam"></textarea>
          </nz-form-control>
        </nz-form-item>

      </nz-tab>
    </nz-tabset>
  </form>

</nz-card>

<ng-template #cardTitle>
  <div class="card_title">
    <i style="margin-right: 10px" nz-icon [type]="'sms'" theme="fill"></i> 短信配置
  </div>
</ng-template>

<ng-template #extraTemplate>
  <div class="tab_operate">
    <button nz-button type="button" (click)="submitForm()" class="ant-btn ant-btn-primary"><span>全部保存</span></button>
  </div>
</ng-template>
